<template>
  <!-- 头部 -->
  <view class="navbar" :style="[style]">
    <template v-if="isLeft">
      <uv-icon name="arrow-left" color="#fff" size="39rpx" @click="onLeft"></uv-icon>
      <uv-line direction="column" color="#fff" :hairline="false" length="20" margin="0 38rpx"></uv-line>
    </template>
    <uv-icon name="home" color="#fff" size="51rpx" @click="onHome"></uv-icon>
  </view>
</template>

<script setup>
  import { reactive, ref, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { onHome, onLeft } from '@/common/js/fn';
  let props = defineProps({
    title: {
      type: String,
      default: ''
    }
  });
  // 获取推荐偏好
  let style = computed(() => {
    const style = {};
    // 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
    style.top = uni.$uv.addUnit(uni.$uv.sys().statusBarHeight + 5, 'px');
    return uni.$uv.deepMerge(style);
  });
  let isLeft = ref(true);
  onLoad(val => {
    isLeft.value = val.isShare !== '1';
  });
</script>

<style lang="scss" scoped>
  .navbar {
    position: fixed;
    top: 23rpx;
    left: 23rpx;
    z-index: 999;
    box-shadow: 0px 0px 0px 0.2px #aaaaaa;
    background-color: rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 206rpx;
    height: $dance-navbar-height;
    border-radius: 45rpx;
  }
</style>
